<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>无序列表、有序列表、自定义列表</title>
  </head>
  <body>
    <!-- 无序列表 -->
    <h4>您喜欢的食物?</h4>
    <ul type="square">
      <li>榴莲</li>
      <li>臭豆腐</li>
      <li>鲱鱼罐头</li>
      <!-- <li>相当于一个容器，里面可以放任何元素 -->
      <li>
        <p>其他。。。</p>
      </li>
    </ul>
    <!-- 有序列表 -->
    <h4>粉丝排行榜</h4>
    <ol type="i">
      <li>斩月 10000</li>
      <li>宇智波鼬 1000</li>
      <li>L 158</li>
    </ol>
    <!-- 自定义列表 -->
    <h4>自定义列表</h4>
    <dl>
      <dt>线下门店</dt>
      <dd>我们之家</dd>
      <dd>服务网点</dd>
      <dd>授权体验点</dd>
      <dt>关注我们</dt>
      <dd>新浪微博</dd>
      <dd>官方微信</dd>
      <dd>联系我们</dd>
    </dl>
  </body>
</html>
